<template>
    <ContentWrap>
        <el-container v-loading="loading">
            <el-aside width="200px">
                <el-menu background-color="#545c64" active-text-color="#ffd04b" text-color="#fff" style="height:100%"
                    :default-active="state.activeIndexs" class="el-menu-vertical-demo" :collapse="isCollapse"
                    @select="handleSelects">
                    <el-menu-item index="0">
                        <template #title>企业端</template>
                    </el-menu-item>
                    <el-menu-item index="1">
                        <template #title>应聘端</template>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <el-menu :default-active="state.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="0">服务条款</el-menu-item>
                    <el-menu-item index="1">隐私政策</el-menu-item>
                </el-menu>
                <div class="margint16" v-show="state.activeIndex == 0">
                    <Editor v-model="state.ruleForm.configName" placeholder="请输入服务条款" />
                </div>
                <div class="margint16" v-show="state.activeIndex == 1">
                    <Editor v-model="state.ruleForm.remark" placeholder="请输入隐私政策" />
                </div>
                <div class="flex jcc aic margint16">
                    <el-button type="primary" style="width:350px;" @click="confirm()">保存</el-button>
                </div>
            </el-main>
        </el-container>

    </ContentWrap>
</template>

<script lang="tsx" setup>
import { Editor } from "@/components/Editor/index"
import { ContentWrap } from '@/components/ContentWrap'
import { ref, reactive, unref } from "vue"
import { ElButton, ElInput, ElMessage, ElMessageBox, ElSwitch } from 'element-plus'
import { getConfigApi, addConfigApi, editConfigApi, deleteConfigApi } from "@/api/module/index"
const loading = ref(false)
const state = reactive({
    activeIndex: "0",
    ruleForm: {} as any,
    activeIndexs: "0",
    tableList:[] as any
})
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
    state.activeIndex = key + ''
  
}
const handleSelects = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
    state.activeIndexs = key + ''
    state.ruleForm=state.tableList[state.activeIndexs]
}
const confirm = () => {
    if (!state.ruleForm.configName) {
        ElMessage({
            type: 'error',
            message: `请输入服务条款`,
        })
        return
    } else if (!state.ruleForm.remark) {
        ElMessage({
            type: 'error',
            message: `请输入隐私政策`,
        })
        return
    }
    let obj = {
        configId: state.ruleForm.configId,
        configName: state.ruleForm.configName,
        configKey: state.ruleForm.configKey,
        // configKey: "yingpin",
        configValue: state.ruleForm.configValue,
        // configValue: 'yingpin',
        remark: state.ruleForm.remark,
    }
    loading.value = true
    editConfigApi(obj).then((res: any) => {
        ElMessage({
            type: 'success',
            message: `${res.msg}`,
        })
        formEl.resetFields()
        getList()
        dialogVisible1.value = false
        loading.value = false
    }).catch((res: any) => {
        ElMessage({
            type: 'error',
            message: `${res.msg}`,
        })
        loading.value = false
    })

}
const getList = async () => {
    const res: any = await getConfigApi({
        pageNum:1,
        pageSize: 10,
    })
    state.tableList=res.rows
    state.ruleForm=res.rows[0]
    console.log(res);
}
getList()
</script>

<style lang="less" scoped>
.margint16 {
    margin-top: 16px;
}
</style>